<!-- 创建时间: 2019年10月14日 星期一 23:00 用户登录组件 -->
<template>
    <div class="login_container">
        <div class="mui-input-group logininfo">
            <div class="mui-input-row">
                <label>用户名</label>
                <input
                    type="text"
                    class="mui-input-clear"
                    autofocus="autofocus"
                    placeholder="请输入身份证号"
                    v-model="loginInfo.Account"
                />
            </div>
            <div class="mui-input-row">
                <label>密码</label>
                <input
                    type="password"
                    class="mui-input-password"
                    placeholder="请输入密码"
                    v-model="loginInfo.Pass"
                />
            </div>
        </div>

        <transition mode="out-in">
            <slider :parentmsg="resetSlider" @fun="getVerCode" v-if="showSlider"></slider>
        </transition>

        <div class="mui-input-group">
            <div class="mui-input-row storagePassword">
                <label>记住密码</label>
                <div :class="['mui-switch mui-switch-mini',{'mui-active':flag}]" @click="setFlag">
                    <div class="mui-switch-handle"></div>
                </div>
            </div>
        </div>

        <div class="SMSLogin text-right">
            <router-link to="/LoginPage/phoneLogin">手机号登录</router-link>
        </div>

        <div class="mui-input-group buttonRegion">
            <div class="mui-button-row">
                <button
                    type="button"
                    class="mui-btn mui-btn-primary mui-btn-block"
                    @click="login"
                    ref="login"
                >登录</button>
            </div>
        </div>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { Indicator, Toast, MessageBox } from "mint-ui";
// 导入滑动验证子组件
import slider from "../subComponents/slider.vue";
import mui from "../../lib/MUI/dist/js/mui.js";
import md5 from "js-md5";
import error from '../../js/error';
const Base64 = require("js-base64").Base64;
import readPhoto from '../../js/readPhoto.js'

export default {
    //import引入的组件需要注入到对象中才能使用
    components: {
        slider: slider
    },
    beforeRouteEnter(to, from, next) {
        if (sessionStorage.getItem("cubelibrarytoken") != null) {
            next({
                path: "/"
            });
        } else {
            next();
        }
    },
    data() {
        //这里存放数据
        return {
            flag: false, // 判断用户是否开户记住密码
            // 用户登录信息
            loginInfo: {
                Account: "",
                Pass: "",
                Code: "" // 验证成功的验证码
            },
            sliderVer: false, // 验证码滑块成功的状态 -- 子组件传过来的
            showSlider: false, // 显示或隐藏验证码滑块 -- 当用户输入完成信息后，点击登录时间显示验证滑块
            resetSlider: false, // 当用户登录失败时，将验证滑块重新启用
            autologin: "" // 用户登录时若开启了记住密码，则会给该变量赋值 用于登录成功后，将保存在这里的 token 保存在 localStorage 中
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {
        sliderVer: function(newval) {
            if (newval) {
                this.$refs.login.setAttribute("disabled", "disabled");
                this.$refs.login.innerText = "登录中...";
                // 进入到 sliderVer 方法内了
                // 证明用户已经将滑块拖动完成，将进行登录请求
                // 该判断，判断用户是否开启了记住密码
                // 若开启，执行该方法，方法内将自动填充 autologin 变量
                this.$http
                    .post("login", {
                        loginInfo: JSON.stringify(this.loginInfo),
                        rememberPass: this.flag
                            ? JSON.stringify(this.remember())
                            : ""
                    })
                    .then(response => {
                        if (response.body != null) {

                            sessionStorage.setItem(
                                "cubelibrarytoken",
                                response.body[0]
                            );
                            // 若 autologin 不为空，则表明用户选择了记住密码
                            // 在数据发送成功后，在这里将 token 存储在 localStorage 中
                            if (this.autologin != "") {
                                localStorage.setItem(
                                    "autoremember",
                                    this.autologin
                                );
                            }
                            // 读取用户头像
                            readPhoto(this);

                            this.$router.push({
                                path: this.$route.query.redirect
                                    ? this.$route.query.redirect
                                    : "/"
                            });
                        } else {
                            mui.alert(response.bodyText);
                            this.$refs.login.removeAttribute("disabled");
                            this.$refs.login.innerText = "登录";
                            this.resetSlider = true;
                            this.showSlider = false;
                            this.sliderVer = false;
                        }
                    });
            }
        }
    },
    //方法集合
    methods: {
        // 记住密码开关
        setFlag() {
            this.flag = !this.flag;
        },
        // 用户记住密码为true 时，调用该方法,该方法在用户将滑块验证完成
        // 时进行调用
        remember() {
            
            var userid = Base64.encode(this.loginInfo.Account);
            var str2 = new Date();
            var str3 = parseInt(Math.random() * (99999 - 10000)) + 10000;
            // 身份证号后六位 - 时间戳 - 随机数
            var token =
                userid.substring(userid.length - 6, userid.length) +
                str2.getTime() +
                str3;
            token = md5(token);
            var expires = "3";
            var date =
                str2.getFullYear() +
                "-" +
                (str2.getMonth() + 1) +
                "-" +
                str2.getDate() +
                " " +
                str2.getHours() +
                ":" +
                str2.getMinutes() +
                ":" +
                str2.getSeconds();
            var rem = {
                userid: userid,
                token: token,
                logintime: date,
                expires: expires
            };
            this.autologin = rem.token;
            return rem;
        },
        // 获取子组件传过来的值
        getVerCode(data, code) {
            this.sliderVer = data;
            this.loginInfo.Code = code;
        },
        // 用户将登录信息填写完成时，点击登录按钮的事件操作
        login() {
            var check = true;
            mui(".mui-input-group.logininfo input").each(function() {
                //若当前input为空，则alert提醒
                if (!this.value || this.value.trim() == "") {
                    var label = this.previousElementSibling;
                    mui.alert(label.innerText + "不允许为空");
                    check = false;
                    return false;
                }
            }); //校验通过，继续执行业务逻辑
            if (check) {
                if (this.showSlider) {
                    mui.alert("请拖动滑块完成验证");
                }
                this.showSlider = true;
                this.resetSlider = false;
            }
        },
        isAutoLogin() {
            if(localStorage.getItem("autoremember") != null){
                this.flag = true;
                error(403, this);
            }
        },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        this.isAutoLogin();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {}
};
mui.init({
    swipeBack: true //启用右滑关闭功能
});
mui(".mui-switch")["switch"]();
</script>

<style lang='scss' scoped>
//@import url(); 引入公共css类
.login_container {
    .storagePassword {
        margin-top: 8px;
    }
    .buttonRegion:before,
    .buttonRegion:after,
    .buttonRegion {
        margin-top: 10px;
        background-color: #fff;
    }
}
.mui-btn-block {
    padding: 5px 0px;
}

.mui-input-group .mui-input-row:after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0px;
    height: 1px;
    content: "";
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    background-color: #c8c7cc;
}
</style>